<!--
 * @Author: zhangyang
 * @Date: 2022-03-02 17:57:12
 * @LastEditTime: 2022-03-10 19:14:15
 * @Description: 侧边栏组件
-->
<script lang="ts" setup>
import { navMap } from '@/modules/1-router';
import { isCollapse, useNavStore } from '@/stores';
import type { NavArrItem } from '@/typings/type';
import { Icons } from '@/typings/icons';
import type { MenuOption } from 'naive-ui';
import type { Ref } from 'vue';
import { RouterLink } from 'vue-router';
import Logo from './Logo';

const { LeftNav } = storeToRefs(useNavStore());

const parseNav = (arr: NavArrItem[]) => {
  for (const item of arr) {
    if (item?.part?.length === 0) {
      delete item.part;
    } else if (item.part) {
      item.part = parseNav(item.part.filter((item) => item.is_show === 1));
      if (item.part?.length === 0) {
        delete item.part;
      }
    }
    item.icon = () => h(
      item.icon_name
        ? Icons[item.icon_name] ?? Icons.UiwAppstoreO
        : Icons.UiwAppstoreO
    );
    if (item.node_path.startsWith('http')) {
      item.label = () => h(
        'a',
        { href: item.node_path, target: '_blank' },
        item.node_name
      );
    } else if (item.node_path !== '') {
      item.label = () => h(
        RouterLink,
        { to: { path: navMap.get(item.node_path) ?? '/' } },
        { default: () => item.node_name }
      );
    } else {
      item.label = item.node_name;
    }
  }
  return arr;
};

const options = computed(() => parseNav(LeftNav.value.filter((item) => item.is_show === 1))) as unknown as Ref<MenuOption[]>;
</script>
<template>
  <NLayoutSider
    bordered
    collapse-mode="width"
    :collapsed-width="64"
    :width="240"
    :collapsed="isCollapse"
  >
    <Logo />
    <NMenu
      inverted
      children-field="part"
      key-field="autoid"
      :collapsed-width="64"
      :collapsed-icon-size="22"
      :collapsed="isCollapse"
      :options="options"
    />
  </NLayoutSider>
</template>


<style lang="scss" scoped>
.n-layout-sider {
  background-color: #304156;
  @apply h-100vh text-gray-300;
}
</style>